<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
			#box2{
				width: 100px;
				height: 100px;
				background-color: blue;
				position: absolute;
				margin: 200px;
			}
		</style>
		<!-- 1.捕获阶段：在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
		 2.目标阶段：事件捕获到目标元素，捕获结束开始在元素目标上触发事件
		 3.冒泡阶段：事件从元素向他的祖先元素传递，依次触发祖先元素上的事件
		 如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true-->
		<script type="text/javascript">
			window.onload=function()
			{   var box1=document.getElementById("box1");
				box1.onmousedown=function()
				{
					document.onmousemove=function(event)
					{
						var box2=document.getElementById("box2");
						event=event||window.event;
						var x=event.clientX;
						var y=event.clientY;
						box1.style.left=x+"px";    
						box1.style.top=y+"px";
						if(box2.style.left+20+"px"==box1.style.left)
						{
							box2.style.left=x+"px";
							box2.style.top=y+"px";
						}
						
					}
					document.onmouseup=function()
					{
						document.onmousemove=null;
						document.onmouseup=null;
						
					}
				}
			}
			
			/* 当越来越近越碰不到怎么做  定位究竟是干嘛用的 */
			
		</script>
	</head>
	<body>
		<div id="box1"></div>
		
		<div id="box2"></div>
	</body>
</html>